<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />
    <link rel="stylesheet" type="text/css" href="onsenui.css">

    <link rel="stylesheet" type="text/css" href="onsen-css-components.css">
    <script src="angular.js"></script>
    <script src="jquery.silver_track.js"></script>
    <script type="text/javascript" src="onsenui.js"></script>
    <title>菜色满意度调查</title>
    <style>
        body{
            margin: 0;
        }
        .div0{
            width: 100%;
            height: 100%;
            position: fixed;
            margin: 0;
            padding: 0;
        }
        .img{
            background-repeat: no-repeat;
            width: 100%;
            height: 100%;
            -webkit-filter: blur(2px);
            -moz-filter: blur(2px);
            -ms-filter: blur(2px);
            filter: blur(2px);
        }
        .title{
            position: fixed;
            z-index: 9999;
            top:10px;
            left: 20px;
            right:20px;
            height: 60px;
            border-radius: 2px;
            background-color: #ffffff;
            box-shadow:4px 4px 14px 2px #000000;
            opacity: 0.3;
            text-align: center;
            line-height: 60px;
            color: #000000;
            font-size: 30px;
        }
        .background{
            position: fixed;
            top: 80px;
            left: 20px;
            right:20px;
            height: 90%;
            background-color: #ffffff;
            box-shadow:4px 4px 14px 2px #1f1f21;
            opacity: 0.2;
            border-radius: 2px;
        }
        .tap{
            width: 40%;
            height: 28%;
            box-shadow:2px 2px 10px 2px #c0c0c0;
            border-radius: 2px;
        }
        .bg{
            position: relative;
            margin:0;
            width: 100%;
            height: 60%;
            background-color:#CCFFFF;
            opacity: 0.7;
            border-radius: 4px;
            text-align: center;
        }
        .img1{
            position: relative;
            margin-left:2%;
            width: 80%;
            height: 85%;
            border-radius: 50%;
        }
        .img2{
            width: 40px;
            height: 40px;

        }
        .img3{
            border-radius: 50%;
        }
        .table{
            position:relative;
            border:0;
            width: 100%;
            height: 40%;
        }
        .table1{
            position:relative;
            width: 100%;
            height: 100%;
        }
        .tr{
            background-color: #c0c0c0;
            opacity: 0.6;
        }
        .button1{
            background: transparent;
            border: none;
        }
        .button2{
            margin-left: 10px;
        }
        .button3{
            font-size:0.5px;
            vertical-align:-25px;
            width:50px;
            margin-left: -2px;
            border-color:#CCCCFF;
            background-color:#99CCFF ;
            color: #3333FF;
        }
    </style>
    <script type="text/javascript">
        var module = ons.bootstrap();
        module.controller('AppController', function($scope) {
            ons.createPopover('popover.html').then(function(popover) {
                $scope.popover = popover;
            });

            $scope.show = function(e) {
                $scope.popover.show(e);
            };
        });


    </script>




    <script type="text/ons-template" id="popover.html">
        <ons-popover direction="up down" cancelable>
            <div style="text-align: center; opacity: 0.6;">
                <button class="alert-dialog-button">太甜</button>
                <button class="alert-dialog-button">太闲</button>
                <button class="alert-dialog-button">太腻</button>
                <button class="alert-dialog-button">太闲</button>
                <button class="alert-dialog-button">太腻</button>
            </div>
        </ons-popover>


    </script>



</head>
<body>
<div class="div0">
    <img class="img" src="img/1.jpg"/>

    <div class="title">菜色满意度调查</div>
    <div class="background"></div>
    <div class="tap" style="float: right;margin-top:-810px;margin-right: 40px;">
            <div class="bg">
                <span style="color: #CC99CC;text-align: center;">
                <img class="img1" src="img/1.jpg"><br>可乐鸡翅
                </span>

            </div>

            <table  class="table">

                <tr class="tr">
                    <td style="position: relative;width: 30%;height: 30%;text-align: center;color: #FF6699;">
                        6
                    </td>
                    <td style="position: relative;width: 70%;height: 30%;text-align: center;background: transparent;color: #FF6699;">
                        2
                    </td>
                </tr>
                <tr class="tr">
                    <td style="position: relative;width: 45%;height: 30%;text-align: center;">
                        <button class="button1"><img class="img2" src="img/3.png"></button>
                    </td>
                    <td style="position: relative;width: 55%;height: 30%;">
                        <table class="table1">
                            <tr>
                                <td style="position: relative;width: 30%;height: 100%;background-color: #c0c0c0;text-align: center;">
                                    <button class="button1 button2"><img class="img2 img3" src="img/4.png"></button>
                                </td>
                                <td style="position: relative;width: 70%;height: 100%;">
                                    <div ng-controller="AppController" class="page" style="width: 100%;height: 50%;>

                                        <div class="navigation-bar__left ">
                                             <button id="nav" ng-click="show('#nav')" class="toolbar-button--outline button3">
                                                 我想说</button>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
    </div>

    <div class="tap" style="float: left;margin-top:-810px;margin-left: 40px;">
            <div class="bg">
                <img class="img1" src="img/1.jpg">

            </div>

            <table class="table">
                <tr class="tr">
                    <td style="position: relative;width: 30%;height: 30%;text-align: center;color: #FF6699;">
                        6
                    </td>
                    <td style="position: relative;width: 70%;height: 30%;text-align: center;background: transparent;color: #FF6699;">
                        2
                    </td>
                </tr>
                <tr class="tr">
                    <td style="position: relative;width:45%;height: 30%;text-align: center;">
                        <button class="button1"><img class="img2" src="img/3.png"></button>
                    </td>
                    <td style="position: relative;width: 55%;height: 30%;">
                        <table class="table1">
                            <tr>
                                <td style="position: relative;width: 30%;height: 100%;background-color: #c0c0c0;text-align: center;">
                                    <button class="button1 button2"><img class="img2 img3" src="img/4.png"></button>
                                </td>
                                <td style="position: relative;width: 70%;height: 100%;">
                                    <div ng-controller="AppController" class="page" style="width: 100%;height: 50%;>

                                        <div class="navigation-bar__left">
                                    <button id="nav1" ng-click="show('#nav1')" class="toolbar-button--outline button3">
                                        我想说</button>
                                        </div>
                                     </div>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
    </div>


    <div class="tap" style="float: right;margin-top:-542px;margin-right: 40px;">
            <div class="bg">
                <img class="img1" src="img/2.jpg">

            </div>

        <table  class="table">

            <tr class="tr">
                <td style="position: relative;width: 30%;height: 30%;text-align: center;color: #FF6699;">
                    6
                </td>
                <td style="position: relative;width: 70%;height: 30%;text-align: center;background: transparent;color: #FF6699;">
                    2
                </td>
            </tr>
            <tr class="tr">
                <td style="position: relative;width: 45%;height: 30%;text-align: center;">
                    <button class="button1"><img class="img2" src="img/3.png"></button>
                </td>
                <td style="position: relative;width: 55%;height: 30%;">
                    <table class="table1">
                        <tr>
                            <td style="position: relative;width: 30%;height: 100%;background-color: #c0c0c0;text-align: center;">
                                <button class="button1 button2"><img class="img2 img3" src="img/4.png"></button>
                            </td>
                            <td style="position: relative;width: 70%;height: 100%;">
                                <div ng-controller="AppController" class="page" style="width: 100%;height: 50%;>

                                        <div class="navigation-bar__left">
                                <button id="nav2" ng-click="show('#nav2')" class="toolbar-button--outline button3">
                                    我想说</button>
                                    </div>
                                </div>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </div>


    <div class="tap" style="float: left;margin-top:-542px;margin-left: 40px;">
            <div class="bg">
                <img class="img1" src="img/2.jpg">

            </div>

        <table class="table">
            <tr class="tr">
                <td style="position: relative;width: 30%;height: 30%;text-align: center;color: #FF6699;">
                    6
                </td>
                <td style="position: relative;width: 70%;height: 30%;text-align: center;background: transparent;color: #FF6699;">
                    2
                </td>
            </tr>
            <tr class="tr">
                <td style="position: relative;width:45%;height: 30%;text-align: center;">
                    <button class="button1"><img class="img2" src="img/3.png"></button>
                </td>
                <td style="position: relative;width: 55%;height: 30%;">
                    <table class="table1">
                        <tr>
                            <td style="position: relative;width: 30%;height: 100%;background-color: #c0c0c0;text-align: center;">
                                <button class="button1 button2"><img class="img2 img3" src="img/4.png"></button>
                            </td>
                            <td style="position: relative;width: 70%;height: 100%;">
                                <div ng-controller="AppController" class="page" style="width: 100%;height: 50%;>

                                        <div class="navigation-bar__left">
                                <button id="nav3" ng-click="show('#nav3')" class="toolbar-button--outline button3">
                                    我想说</button>
                                </div>
                            </div>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
     </table>
    </div>

    <div class="tap" style="float: right;margin-top:-273px;margin-right: 40px;">
            <div class="bg">
                <img class="img1" src="img/2.jpg">

            </div>

        <table class="table">
            <tr class="tr">
                <td style="position: relative;width: 30%;height: 30%;text-align: center;color: #FF6699;">
                    6
                </td>
                <td style="position: relative;width: 70%;height: 30%;text-align: center;background: transparent;color: #FF6699;">
                    2
                </td>
            </tr>
            <tr class="tr">
                <td style="position: relative;width:45%;height: 30%;text-align: center;">
                    <button class="button1"><img class="img2" src="img/3.png"></button>
                </td>
                <td style="position: relative;width: 55%;height: 30%;">
                    <table class="table1">
                        <tr>
                            <td style="position: relative;width: 30%;height: 100%;background-color: #c0c0c0;text-align: center;">
                                <button class="button1 button2"><img class="img2 img3" src="img/4.png"></button>
                            </td>
                            <td style="position: relative;width: 70%;height: 100%;">
                                <div ng-controller="AppController" class="page" style="width: 100%;height: 50%;>

                                        <div class="navigation-bar__left">
                                <button id="nav4" ng-click="show('#nav4')" class="toolbar-button--outline button3">
                                    我想说</button>
                                    </div>
                                </div>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </div>

    <div class="tap" style="float: left;margin-top:-273px;margin-left: 40px;">
            <div class="bg">
                <img class="img1" src="img/2.jpg">

            </div>

        <table class="table">
            <tr class="tr">
                <td style="position: relative;width: 30%;height: 30%;text-align: center;color: #FF6699;">
                    6
                </td>
                <td style="position: relative;width: 70%;height: 30%;text-align: center;background: transparent;color: #FF6699;">
                    2
                </td>
            </tr>
            <tr class="tr">
                <td style="position: relative;width:45%;height: 30%;text-align: center;">
                    <button class="button1"><img class="img2" src="img/3.png"></button>
                </td>
                <td style="position: relative;width: 55%;height: 30%;">
                    <table class="table1">
                        <tr>
                            <td style="position: relative;width: 30%;height: 100%;background-color: #c0c0c0;text-align: center;">
                                <button class="button1 button2"><img class="img2 img3" src="img/4.png"></button>
                            </td>
                            <td style="position: relative;width: 70%;height: 100%;">
                                <div ng-controller="AppController" class="page" style="width: 100%;height: 50%;>

                                        <div class="navigation-bar__left">
                                <button id="nav5" ng-click="show('#nav5')" class="toolbar-button--outline button3">
                                    我想说</button>
                                    </div>
                                </div>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </div>
</div>

</body>
</html>